<template>
    <div class="login_bg">
        <div class="login_adv" style="background-image: url('img/login.jpg');">
            <div class="login_adv__mask"></div>
            <footer class="login-footer">
                <a href="https://beian.miit.gov.cn/" target="_blank"><b>渝ICP备2025072265号-1</b></a>
            </footer>
        </div>
        <div class="login_main">
            <div class="login_config">
                <el-button :icon="sysGlobalStore.sysDark ? 'Sunny' : 'Moon'" circle type="info"
                           @click="sysGlobalStore.sysDark = !sysGlobalStore.sysDark"></el-button>
                <el-dropdown trigger="click" placement="bottom-end" @command="configLang">
                    <el-button circle>
                        <svg xmlns="http://www.w3.org/2000/svg"
                             aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
                             viewBox="0 0 512 512">
                            <path
                                d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
                                fill="currentColor"></path>
                            <path
                                d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
                                fill="currentColor"></path>
                        </svg>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in lang" :key="item.value" :command="item"
                                              :class="{ 'selected': sysGlobalStore.sysLang == item.value }">{{
                                    item.name
                                }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="login-form">
                <div class="login-header">
                    <div class="logo">
                        <img :alt="appTitle" :src="logo">
                        <label>{{ appTitle }}</label>
                    </div>
                </div>
                <el-tabs>
                    <el-tab-pane :label="$t('login.accountLogin')" lazy>
                        <password-form></password-form>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('login.captchaLogin')" lazy>
                        <email-form></email-form>
                    </el-tab-pane>
                </el-tabs>
                <div>
                    <div class="login-oauth">
                        <el-button type="success" icon="fc-icon-wechat" circle
                                   @click="wechatOfficialAccount"></el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog v-model="showWechatOfficialAccount" :width="400" destroy-on-close>
        <el-form>
            <div class="qrCodeLogin">
                <div><b><h3>【扫码关注发送"验证码"】</h3></b></div>
                <br>
                <fc-qr-code class="qrCode" :content="wechatOfficialAccountLoginCode" :size="266"
                            :logo="logo"></fc-qr-code>
                <br>
                <el-form-item prop="captcha" :show-message="false">
                    <div class="login-msg-yzm">
                        <el-form-item prop="captcha" class="login-captcha-item">
                            <el-input v-model="form.captcha" clearable placeholder="请输入验证码"></el-input>
                        </el-form-item>
                        <el-button type="primary" :loading="islogin" class="login-btn-noshake" @click="login">
                            {{ $t('login.signIn') }}
                        </el-button>
                    </div>
                </el-form-item>
                <div>
                    <a href="javascript:void(0)" @click="showAgree = true"><h4 style="color: #66b1ff">
                        扫码即阅读并同意《服务协议》</h4></a>
                </div>
            </div>
        </el-form>
    </el-dialog>
    <el-dialog :top="'8vh'" v-model="showAgree" title="服务协议" :width="800" destroy-on-close>
        <agreement></agreement>
        <template #footer>
            <el-button @click="showAgree = false">取消</el-button>
            <el-button type="primary" @click="showAgree = false;">我已阅读并同意</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {ref, onMounted, nextTick, reactive} from 'vue';
import passwordForm from './components/passwordForm.vue';
import emailForm from './components/emailForm.vue';
import {useI18n} from "vue-i18n";
import {useSysGlobalStore} from "@/store/system/global";
import {useSysViewTagsStore} from "@/store/system/viewTags";
import {useSysKeepAliveStore} from "@/store/system/keepAlive";
import {useAuthStore} from "@/store/modules/auth";
import {useMenuStore} from "@/store/modules/menu";
import {useEnvelopeStore} from "@/store/modules/envelope.ts";
import {envelopeApi} from "@/api/modules/guest.ts";
import logo from '@/assets/image/logo.png';
import agreement from "./agreement.vue";
import {AuthRequestModel} from "@/models/authModel.ts";
import {getPolicyApi, loginApi, logoutApi} from "@/api/modules/auth.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";

const {locale} = useI18n();
const showAgree = ref(false);
const sysGlobalStore = useSysGlobalStore();
const sysViewTagsStore = useSysViewTagsStore();
const sysKeepAliveStore = useSysKeepAliveStore();
const authStore = useAuthStore();
const menuStore = useMenuStore();
const envelopeStore = useEnvelopeStore();
const lang = ref([
    {
        name: '简体中文',
        value: 'zh-cn',
    },
    {
        name: 'English',
        value: 'en',
    }
]);
const wechatOfficialAccountLoginCode = ref("");
const showWechatOfficialAccount = ref(false);
const appTitle = import.meta.env.VITE_VUE_TITLE;

sysGlobalStore.$subscribe((_mutation, state) => {
    document.documentElement.classList[state.sysDark ? 'add' : 'remove']('dark');
    locale.value = state.sysLang
});

onMounted(async () => {
    envelopeStore.$reset();
    authStore.$reset();
    menuStore.$reset();
    sysViewTagsStore.$reset();
    sysKeepAliveStore.$reset();
    sysGlobalStore.$reset();
    await nextTick();
    await envelop();
})

const envelop = async () => {
    const envelopData = await envelopeApi();
    envelopeStore.key = envelopData.data.key;
}

const configLang = (command: any) => {
    sysGlobalStore.sysLang = command.value
}

const wechatOfficialAccount = async () => {
    showWechatOfficialAccount.value = true;
    wechatOfficialAccountLoginCode.value = import.meta.env.VITE_OFFICIAL_ACCOUNT_QRCODE;
}

const islogin = ref(false);
const form = reactive<AuthRequestModel>({
    type: "official",
    captcha: "",
});
const login = async () => {
    if (!form.captcha.trim()) {
        ElMessage.error('请输入验证码');
        return;
    }
    try {
        islogin.value = true;
        const loginData = await loginApi(form);
        authStore.token = loginData.data.token;
        authStore.userInfo = loginData.data.user;

        let policyData = await getPolicyApi();
        if (policyData.data.menus.length === 0) {
            ElMessageBox.confirm('当前账户无任何菜单权限，请联系系统管理员!', '提示', {
                type: 'warning',
                confirmButtonClass: 'el-button--primary',
                showCancelButton: false,
            }).then(async () => {
                await logoutApi();
                authStore.$reset();
            });
            return;
        }
        menuStore.list = policyData.data.menus;
        menuStore.permissions = policyData.data.permissions;
        await router.replace({path: '/'});
        ElMessage.success("欢迎回来!");
    } catch (error) {
        console.log(error);
    } finally {
        islogin.value = false;
    }
}
</script>

<style scoped>
.login_bg {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
}

.login_adv {
    width: 33.33333%;
    background-color: #555;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.login_adv__title {
    color: #fff;
    padding: 40px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
}

.login_adv__title h2 {
    font-size: 40px;
}

.login_adv__title h4 {
    font-size: 18px;
    margin-top: 10px;
    font-weight: normal;
}

.login_adv__title p {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
}

.login_adv__title div {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.login_adv__title div span {
    margin-right: 15px;
}

.login_adv__title div i {
    font-size: 40px;
}

.login_adv__title div i.add {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.login_adv__bottom {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: #fff;
    padding: 40px;
    background-image: linear-gradient(transparent, #000);
    z-index: 3;
}

.login_adv__mask {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.login_main {
    flex: 1;
    overflow: auto;
    display: flex;
}

.login-form {
    width: 400px;
    margin: auto;
    padding: 20px 0;
}

.login-header {
    margin-bottom: 40px;
}

.login-header .logo {
    display: flex;
    align-items: center;
}

.login-header .logo img {
    width: 40px;
    height: 40px;
    vertical-align: bottom;
    margin-right: 10px;
}

.login-header .logo label {
    font-size: 26px;
    font-weight: bold;
}

.login-oauth {
    display: flex;
    justify-content: space-around;
}

.bottom-info {
    margin-top: 10px;
}

.login-form .el-divider {
    margin-top: 40px;
}

.login-form:deep(.el-tabs) .el-tabs__header {
    margin-bottom: 25px;
}

.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
    font-size: 14px;
}

.login-form:deep(.login-forgot) {
    text-align: right;
}

.login-form:deep(.login-forgot) a {
    color: var(--el-color-primary);
}

.login-form:deep(.login-forgot) a:hover {
    color: var(--el-color-primary-light-3);
}

.login-form:deep(.login-reg) {
    font-size: 14px;
    color: var(--el-text-color-primary);
}

.login-form:deep(.login-reg) a {
    color: var(--el-color-primary);
}

.login-form:deep(.login-reg) a:hover {
    color: var(--el-color-primary-light-3);
}

.login_config {
    position: absolute;
    top: 20px;
    right: 20px;
}

.login-form:deep(.login-msg-yzm) {
    display: flex;
    width: 100%;
}

.login-form:deep(.login-msg-yzm) .el-button {
    margin-left: 10px;
    --el-button-size: 42px;
}

.qrCodeLogin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px 0;
}

.qrCodeLogin img.qrCode {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.qrCodeLogin p.msg {
    margin-top: 15px;
}

.qrCodeLogin .qrCodeLogin-result {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: var(--el-mask-color);
}

@media (max-width: 1200px) {
    .login-form {
        width: 340px;
    }
}

@media (max-width: 1000px) {
    .login_main {
        display: block;
    }

    .login_main .login_config {
        position: static;
        padding: 20px 20px 0 20px;
        text-align: right;
    }

    .login-form {
        width: 100%;
        padding: 20px 40px;
    }

    .login_adv {
        display: none;
    }
}
.login-msg-yzm {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 266px;
}

.login-captcha-item {
    margin-bottom: 0;
    flex: 1;
}

.login-btn-noshake {
    min-width: 88px;
    position: relative;
}
:deep(.login-btn-noshake .el-icon-loading) {
    position: absolute;
    left: calc(50% - 0.5em);
}
.login-footer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 15px;
    color: #fff;
    z-index: 999;
    white-space: nowrap;
}

.login-footer a {
    color: #fff;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}
</style>
